<template>
  <a-scrollbar style="height: 370px; overflow: auto">
    <div class="quick-retouching-con">
      <div class="common-text">{{ taskDesc }}</div>
      <div class="mt10">任务基础信息</div>
      <BasicTaskInfo ref="basicTaskInfo" type="QUICK_FIX_PICTURE" :price="amtCost" />
      <div class="required mt10">
        <span>任务需求</span>
        <!-- <span style="color: red; margin-left: 10px">合计服务费 ￥{{ amtCost }}</span> -->
      </div>

      <a-checkbox-group style="width: 100%">
        <div class="change-plan base-con">
          <div class="left">
            <a-space>
              <!-- <a-checkbox value="1"></a-checkbox> -->
              <div style="width: 80px">改图</div>
              <div class="ml10">服务费:￥{{ configInfo.amtServiceFixPic ? configInfo.amtServiceFixPic : 0 }}/张</div>
              <div class="ml10">本次修图数量：{{ dataObj.fixPicList.length }} 张</div>
            </a-space>
            <div class="box">
              <div class="box-img-con" v-for="(item, index) of dataObj.fixPicList" :key="index">
                <div class="mask">
                  <div class="btn-con">
                    <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index, 'fixPicList')" />
                    <icon-delete class="cursor" @click="dataObj.fixPicList.splice(index, 1)" />
                  </div>
                </div>
                <a-image :src="item.url" width="100%" height="100%" />
              </div>
              <div class="fl" v-loading="fixPicLoading" style="width: 80px; height: 80px">
                <a-upload class="fl" :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="beforeUplaodfixPic" />
              </div>
            </div>
          </div>
          <div class="right">
            <div class="required">需求描述</div>
            <div class="right-box">
              <a-textarea v-model="dataObj.fixPicRemark" placeholder="请输入描述" auto-size />
            </div>
          </div>
        </div>
        <div class="small-poster base-con">
          <div class="left">
            <a-space>
              <!-- <a-checkbox value="2"></a-checkbox> -->
              <div style="width: 80px">A+小海报</div>
              <div class="ml10">服务费:￥{{ configInfo.amtServiceAddSmallPoster ? configInfo.amtServiceAddSmallPoster : 0 }}/张</div>
            </a-space>
            <div class="upload-con clearfix mt10">
              <div class="upload-con-left fl">
                <div class="fl" v-loading="smallPosterLoading" style="width: 80px; height: 80px">
                  <a-upload v-loading="smallPosterLoading" class="fl" style="width: 80px" action="/" :show-file-list="false" :on-before-upload="beforeUplaodSmallPoster">
                    <template #upload-button>
                      <div class="custom-uplaod-btn">
                        <icon-plus />
                      </div>
                    </template>
                  </a-upload>
                </div>
              </div>
              <div class="upload-con-right fl">
                <ul style="width: 100%">
                  <li v-for="(item, index) of dataObj.addSmallPosterAttList" :key="item">
                    <span>{{ item.name ? item.name : getName(item.url) }}</span>
                    <span class="cursor icon-del" @click="dataObj.addSmallPosterAttList.splice(index, 1)"><icon-close /></span>
                  </li>
                </ul>
              </div>
            </div>

            <!-- <div class="box">
              <div class="box-img-con" v-for="(item, index) of dataObj.addSmallPosterAttList" :key="index">
                <div class="mask">
                  <div class="btn-con">
                    <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index, 'addSmallPosterAttList')" />
                    <icon-delete class="cursor" @click="dataObj.addSmallPosterAttList.splice(index, 1)" />
                  </div>
                </div>
                <a-image :src="item.url" width="100%" height="100%" />
              </div>
              <div class="fl" v-loading="smallPosterLoading" style="width: 80px; height: 80px">
                <a-upload class="fl" :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="beforeUplaodSmallPoster" />
              </div>
            </div> -->
          </div>
          <div class="right">
            <div class="required">需求描述</div>
            <div class="right-box">
              <a-textarea v-model="dataObj.addSmallPosterAttRemark" placeholder="请输入描述" auto-size />
            </div>
          </div>
        </div>
        <div class="big-poster base-con">
          <div class="left">
            <a-space>
              <!-- <a-checkbox value="3"></a-checkbox> -->
              <div style="width: 80px">A+大海报</div>
              <div class="ml10">服务费:￥{{ configInfo.amtServiceAddBigPoster ? configInfo.amtServiceAddBigPoster : 0 }}/张</div>
            </a-space>
            <div class="upload-con clearfix mt10">
              <div class="upload-con-left fl">
                <div class="fl" v-loading="bigPosterLoading" style="width: 80px; height: 80px">
                  <a-upload v-loading="bigPosterLoading" class="fl" style="width: 80px" action="/" :show-file-list="false" :on-before-upload="beforeUplaodBigPoster">
                    <template #upload-button>
                      <div class="custom-uplaod-btn">
                        <icon-plus />
                      </div>
                    </template>
                  </a-upload>
                </div>
              </div>
              <div class="upload-con-right fl">
                <ul style="width: 100%">
                  <li v-for="(item, index) of dataObj.addBigPosterAttList" :key="item">
                    <span>{{ item.name ? item.name : getName(item.url) }}</span>
                    <span class="cursor icon-del" @click="dataObj.addBigPosterAttList.splice(index, 1)"><icon-close /></span>
                  </li>
                </ul>
              </div>
            </div>

            <!-- <div class="box">
              <div class="box-img-con" v-for="(item, index) of dataObj.addBigPosterAttList" :key="index">
                <div class="mask">
                  <div class="btn-con">
                    <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index, 'addBigPosterAttList')" />
                    <icon-delete class="cursor" @click="dataObj.addBigPosterAttList.splice(index, 1)" />
                  </div>
                </div>
                <a-image :src="item.url" width="100%" height="100%" />
              </div>
              <div class="fl" v-loading="bigPosterLoading" style="width: 80px; height: 80px">
                <a-upload class="fl" :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="beforeUplaodBigPoster" />
              </div>
            </div> -->
          </div>
          <div class="right">
            <div class="required">需求描述</div>
            <div class="right-box">
              <a-textarea v-model="dataObj.addBigPosterAttRemark" placeholder="请输入描述" auto-size />
            </div>
          </div>
        </div>
      </a-checkbox-group>
    </div>

    <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="srcList" />
  </a-scrollbar>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { uplaodImg, uploadFile } from '@/api/base'
  import { getPlatTaskConfigByTaskType } from '@/api/task'
  import BasicTaskInfo from './basicTaskInfo.vue'
  import { onMounted } from 'vue'
  // 基础信息实体
  const basicTaskInfo = ref<any>(null)
  const dataObj = reactive<any>({
    addBigPosterAttList: [],
    addBigPosterAttRemark: '',
    addSmallPosterAttList: [],
    addSmallPosterAttRemark: '',
    fixPicList: [],
    fixPicRemark: '',
  })
  let visible = ref(false)
  let fixPicLoading = ref(false)
  let bigPosterLoading = ref(false)
  let smallPosterLoading = ref(false)

  let configInfo: any = ref({})
  let taskDesc = ref('')
  let current = ref()
  let srcList = ref([])

  let amtCost = computed(() => {
    let num1 = dataObj.fixPicList.length * (configInfo.value.amtServiceFixPic ? configInfo.value.amtServiceFixPic : 0)
    let num2 = dataObj.addBigPosterAttList.length * (configInfo.value.amtServiceAddBigPoster ? configInfo.value.amtServiceAddBigPoster : 0)
    let num3 = dataObj.addSmallPosterAttList.length * (configInfo.value.amtServiceAddSmallPoster ? configInfo.value.amtServiceAddSmallPoster : 0)
    return num1 + num2 + num3
  })

  const beforeUplaodfixPic: any = async (file: any) => {
    let type = file.type.split('/')[1]
    if (!['JPG', 'PNG', 'BMP', 'GIF', 'JPEG'].includes(type.toUpperCase())) {
      Message.error('请上传JPG/PNG/BMP/GIF/JPEG格式的图片')
      return false
    }
    if (file.size / 1024 / 1024 > 5) {
      Message.error('图片最大为5M')
      return false
    }
    try {
      fixPicLoading.value = true
      let formData = new FormData()
      formData.append('file', file)
      const res: any = await uplaodImg(formData)
      if (res) {
        let obj = {
          amtService: configInfo.value.amtServiceFixPic,
          url: res.data.publicUrl,
          name: file.name,
        }
        dataObj.fixPicList.push(obj)
      }
    } catch (error) {}
    fixPicLoading.value = false
  }
  const beforeUplaodSmallPoster: any = async (file: any) => {
    let formData = new FormData()
    formData.append('file', file)
    try {
      smallPosterLoading.value = true
      const res: any = await uploadFile(formData)
      if (res) {
        let obj = {
          amtService: configInfo.value.amtServiceAddSmallPoster,
          url: res.data.publicUrl,
          name: file.name,
        }
        dataObj.addSmallPosterAttList.push(obj)
      }
    } catch (error) {}
    smallPosterLoading.value = false
  }
  const beforeUplaodBigPoster: any = async (file: any) => {
    let formData = new FormData()
    formData.append('file', file)
    bigPosterLoading.value = true
    try {
      const res: any = await uploadFile(formData)
      if (res) {
        let obj = {
          amtService: configInfo.value.amtServiceAddBigPoster,
          url: res.data.publicUrl,
          name: file.name,
        }
        dataObj.addBigPosterAttList.push(obj)
      }
    } catch (error) {}
    bigPosterLoading.value = false
  }

  const showImgPre = (index: number, key: string) => {
    current.value = index
    srcList.value = dataObj[key].map((e: any) => e.url)
    visible.value = true
  }

  const getName = (url: string) => {
    let arr = url.split('/')
    if (arr[0]) return arr[arr.length - 1]
  }

  const getOrSetInfo = (info?: any) => {
    if (!info) {
      let item = basicTaskInfo.value.getOrSetForm()
      // 校验基础信息必填项
      if (!item) return
      // 校验任务需求
      if (!dataObj.fixPicList[0] && !dataObj.addSmallPosterAttList[0] && !dataObj.addBigPosterAttList[0]) {
        Message.error('请上传任务需求附件')
        return false
      }

      dataObj.amtFixPicService = configInfo.value.amtServiceFixPic
      dataObj.amtAddSmallPosterService = configInfo.value.amtServiceAddSmallPoster
      dataObj.amtAddBigPosterService = configInfo.value.amtServiceAddBigPoster

      let obj = {
        ...item,
        amtCost: amtCost.value,
        quickFixPicTask: dataObj,
      }
      return obj
    } else {
      dataObj.addBigPosterAttList = info.quickFixPicTask.addBigPosterAttList || []
      dataObj.addBigPosterAttRemark = info.quickFixPicTask.addBigPosterAttRemark
      dataObj.addSmallPosterAttList = info.quickFixPicTask.addSmallPosterAttList || []
      dataObj.addSmallPosterAttRemark = info.quickFixPicTask.addSmallPosterAttRemark
      dataObj.fixPicList = info.quickFixPicTask.fixPicList || []
      dataObj.fixPicRemark = info.quickFixPicTask.fixPicRemark
      basicTaskInfo.value.getOrSetForm(info)
    }
  }

  const getPrice = () => {
    return amtCost.value
  }

  // 获取平台端配置
  const getComConfig = async () => {
    const res: any = await getPlatTaskConfigByTaskType({ taskType: 'QUICK_FIX_PICTURE' })
    let amtService: any = res?.data?.amtService || {}
    configInfo.value = amtService
    taskDesc.value = res?.data?.taskDesc || ''
  }

  onMounted(() => {
    getComConfig()
  })

  defineExpose({ getOrSetInfo, getPrice })
</script>

<style lang="less" scoped>
  :deep(.arco-checkbox) {
    margin-right: 0 !important;
  }
  :deep(.arco-textarea-wrapper) {
    border: none !important;
  }

  .quick-retouching-con {
    padding: 5px 0;
    box-sizing: border-box;
    .common-text {
      font-size: 12px;
      color: #a39999;
    }
    .base-con {
      min-height: 230px;
      width: 100%;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 10px 5px;
      display: flex;
      .left {
        width: 50%;
        .box {
          margin-top: 5px;
          min-height: 180px;
          // border-right: 1px solid #d7d7d7;
          .box-img-con {
            float: left;
            width: 80px;
            height: 80px;
            position: relative;
            margin-right: 10px;
            &:hover {
              .mask {
                display: block;
              }
            }
            .mask {
              height: 80px;
              width: 80px;
              position: absolute;
              top: 0;
              left: 0;
              display: none;
              z-index: 1;
              background: rgba(0, 0, 0, 0.5);
              .btn-con {
                width: 80px;
                color: white;
                font-size: 18px;
                text-align: center;
                margin-top: 25px;
                align-items: center;
              }
            }
          }
        }
      }
      .right {
        width: 50%;
        margin-left: 10px;
        .right-box {
          margin-top: 5px;
          min-height: 180px;
          border: 1px solid #d7d7d7;
        }
      }
    }
  }

  .upload-con {
    display: flex;
    .upload-con-left {
      width: 80px;
    }
    .upload-con-right {
      flex: 1;
      margin-left: 20px;
      li {
        height: 20px;
        line-height: 20px;
        width: 100%;
        background-color: #d7d7d7;
        margin-bottom: 8px;
        font-size: 12px;
        color: #aaaaaa;
        position: relative;
        .icon-del {
          font-size: 12px;
          color: black;
          margin-left: 30px;
          position: absolute;
          right: 10px;
          top: 0;
        }
      }
    }
    .upload-btn-style {
      width: 60px;
      height: 60px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      text-align: center;
      line-height: 60px;
      font-size: 26px;
    }
  }

  .custom-uplaod-btn {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }
</style>
